@import "../common/common";
@import (inline) "../common/lib/swiper-3.4.1.min.css";

#app{ 

	.header{    
		width: 100%; 
		position: relative;
		img{
			height: 3.6rem;
		}
		.like{
			position: absolute;
			right: .3rem; 
			top: .7rem;
			width: .44rem;
			height: .44rem;
			background: url('../images/unlike.png') no-repeat;
			background-size: 100% 100%;
			z-index: 10;
		}
		.like.active{
			background: url('../images/like.png') no-repeat;
			background-size: 100% 100%;
		}
	}
	.detail{ 
		padding: 0 0.4rem;
		.title{
			font-size: 0.36rem;
			color: @cTitle;
			padding: 0.5rem 0 0.2rem 0;
		}
		.user-info{  
			font-size: 0.26rem;
			color: @cFont;
			padding-bottom: 0.5rem;
			span{
				margin-right: 0.2rem;
			} 
			a.down{
				position: relative;
				float: right;
				margin: 0;
				font-size: 0.24rem;
				color: #798799;
			} 
			a.down:before{
				content: '';
				position: absolute;
				top: 0.1rem;
				left: -0.4rem;
				width: 0.29rem;
				height: 0.24rem;
				background: url('../images/down.png') no-repeat;
				background-size: 100% 100%;

			}
		}
		.info{
			color: @cFont;
			font-size: 0.3rem;
			padding-bottom: 0.55rem;
			text-indent: 0.6rem;
			line-height: 0.45rem;
			a{
				text-indent: initial;
				color: #2aa1fd;
				font-size: 0.22rem;
				float: right;
			}
		} 
	} 
	.recom{  
		overflow: hidden;
		padding: 0 0.4rem;
		.swiper-container{
			margin: 0.4rem 0;
			overflow: visible;
			.swiper-slide{
				.item{ 
					border-radius: 0.1rem;
					box-shadow: 0rem 0.05rem 0.8rem 0.1rem #eee;
					padding: 0.2rem;
					margin-right: 0.2rem;
					.flex; 
					.flex-align-center;
					.pic{
						width: 1.4rem;
						height: 1.75rem;
						margin-right: 0.2rem;
						border-radius: 0.03rem;
						overflow: hidden;
					} 
					.info{  
						.flex-n(1); 
						>div{
							padding: 0.05rem 0;
						}
						.title{
							.ellipsis;
							font-size: 0.28rem;
							color: @cTitle;
							font-weight: bold;
							span{
								float: right;
								font-size: 0.22rem;
								color: #ffa800;
								font-weight: normal;
							} 
						} 
						.desc{
							font-size: 0.24rem;
							color: #798799;
							.ellipsis;
						}
						.user{
							font-size: 0.24rem;
							color: @cTitle;
							span{
								margin-right: 0.15rem;
							}
							.ellipsis;
						}
						.state{ 
							font-size: 0.22rem;
							color: #a1b2cc;
							.read{
								padding-left: 0.25rem;
								position: relative;
								&:before{
									position: absolute;
									content: '';
									width: 0.15rem;
									height: 0.2rem;
									background: url('../images/read.png') no-repeat;
									background-size: 100% 100%;
									left: 0;
									top: 50%;
									margin-top: -.1rem;
								}
							}
							.time{
								position: relative;
								top:-.07rem;
								padding: 0.05rem; 
								float: right;
								color: #ffa800;
								font-size: 0.2rem;
								border: .01rem solid #ffa800;
								border-radius: 0.04rem;
							}
						}
					}
				}
			}
		}
	}  
	.leave-message{
		padding: .2rem .4rem 0 .4rem;
		.title-prefix{
			a{ 
				float: right;
				font-weight: normal;
				span{
					position: relative;
					&:before{
						content: '';
						position: absolute;
					}
				}
			}
		}
		.message{ 
			padding-top: 0.38rem;
			.item{ 
				margin-bottom: 0.4rem;
				.title{ 
					.flex;
					.flex-align-center;
					.user-pic{ 
						width: 0.7rem;
						height: 0.7rem;
						margin-right: 0.2rem;
					}
					.user{
						.flex-n(1);
						.name{
							font-size: 0.24rem;
							color: @cTitle;
						}
						.state{
							font-size: 0.18rem;
							color: #a1b2cc;
						}
					}
				}  
				.content{
					.flex;
					.pic{
						width: 0.7rem;
						height: 0.7rem;
						margin-right: 0.2rem;
					}
					.detail{
						.flex-n(1); 
						padding:0;
						.info{
							font-size: 0.24rem;
							color: @cTitle;
							padding-top: 0.2rem;
							line-height: 0.4rem;
							text-indent: initial; 
						}
					} 
					.repeat{
						background: #f5f8fa;
						padding: 0.2rem;
						border-radius: 0.04rem;
						.user{
							overflow: hidden;
							.name-repeat{
								float: left;
								i{ 
									display: inline-block;
									margin-left: 0.07rem;
								}
							}
							
							.time{
								float: right;
								font-size: 0.2rem;
								color: #a1b2cc;
							}
						}
						.info{
							font-size: 0.24rem;
							color: @cTitle;
							line-height: 0.4rem;
							padding: 0;
							padding-top: 0.2rem;
						}
					}
				}
			}
		}
		.empty-message{
			padding: 0.6rem 0;
			margin: 0.5rem 0;
			background: #f7f9fa;
			text-align: center;
			.empty-icon{
				width: 2.56rem;
				margin: 0 auto;
				margin-bottom: 0.3rem;
				text-align: center;
			}
			font-size: 0.24rem;
			color: #91a2b8;
			text-align: center;
		}
	}
	.comment{
		padding: 0 0.4rem;
		height: 0.98rem;
		background: #fff;
		.flex;
		input{
			.flex-n(1);
			height: 0.36rem;
			padding: 0.12rem;
			border-radius: 0.07rem;
			background: #f5f8fa;
			border: none;
			border: 1px solid #ebeef0;
		}
		label{
			width: 1rem;
			font-size: 0.34rem;
			height: 0.48rem;
			margin-left: 0.34rem;
		}
	}
}

